@media screen and (max-width:719px) {
    .m-header .top-image {
        width: 100.5%;
        padding-bottom: 73.4375%
    }
    .m-header {
        width: 99.5%;
    }
}
@media screen and (max-width:719px) {
    .hero {
        height: 100%
    }
}

.m-header
    position: relative
    display: block
    width: 100%

.m-header .top-image
    display: block
    width: 100%
    padding-bottom: 550px
    background: center center/cover no-repeat

.m-header #wave-canvas
    position: absolute
    bottom: -1px
    left: 0
    width: 100%
    height: 100%
    z-index: 0
    pointer-events: none

.hero
    text-align: center
    position: absolute
    width: 100%
    overflow: hidden


/* .hero .inner{background:linear-gradient(rgba(255, 255, 255, 0.2), rgba(173, 216, 230, 0.4)), url(assets/img/mask.png) repeat} */

.hero .inner {
   /* background: url(images/mask.png) repeat;*/
}
